import React, { useState } from 'react';
import Category from '@/components/Category/index'
import { Button, Card, Form, Table } from 'antd'
import { useSelector } from 'react-redux'
import { Tag } from 'antd';

function Attr() {
    const data = useSelector(data => {
        return data as any
    })
    const [isShow, setIsShow] = useState(true)
    // 添加按钮
    const addAttributeButton = () => {

    }


    const columns = [
        {
            title: '序号',
            render: (text: any, record: any, index: number) => {
                return <div>{index}</div>
            }
        },
        {
            title: '属性名称',
            dataIndex: 'attrName',
            key: 'attrName',
        },
        {
            title: '属性值名称列表',
            render: (text: any, record: any, index: number) => {
                return <div key={index}>
                    {
                        record.attrValueList.map((item: any) => {
                            return <Tag color="green" key={item.id}>{item.valueName}</Tag>
                        })
                    }

                </div>
            }
        },
        {
            title: '操作',
            render: () => (
                <><Button>编辑</Button>
                    <Button type={'primary'} danger className={'m1'}>删除</Button></>
            )

        },
    ];
    return (
        <div>
            <Category/>
            <Card className={'h1'}>
                <Button type={'primary'} onClick={addAttributeButton}>添加属性</Button>
                {
                    isShow ? <Table dataSource={data.category.allCategoryList} columns={columns} rowKey={'id'}/> :
                        <Form>
                            
                        </Form>
                }

            </Card>
        </div>
    );
}

export default Attr;